/**egg**/
.egg-box{
  position: absolute;
  top: 5.20rem;
  width: 3.12rem;
  height: 3.20rem;
}
.egg-box .egg-shadow{
  left: 0.67rem;
  bottom: 0.32rem;
}
.egg{
  position: relative;
  z-index: 1;
  width: 3.12rem;
  height: 3.20rem;
  animation: eggInit 2s linear infinite;
  transform-origin: 50% 100%;
}
.stopShake .egg{
  animation: none;
}

.egg-left{
  left:0;
}
.egg-left .egg{
  animation-delay: 0.3s;
}
.egg-middle{
  left:2.20rem;
}
.egg-right{
  right:0;
}
.egg-right .egg{
  animation-delay: 0.5s;
}
.eggLeftClicked .egg{
  animation: hideEgg 0.1s 1.5s linear forwards;
}
.eggMiddleClicked .egg{
  animation: hideEgg 0.1s 1.5s linear forwards;
}
.eggRightClicked .egg{
  animation: hideEgg 0.1s 1.5s linear forwards;
}
@keyframes hideEgg{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes eggInit{
  0%,100%{
    transform: rotate(-2deg);
  }
  50%{
    transform: rotate(2deg);
  }
}
/**egg broken**/
.egg-broken-wrap{
  pointer-events: none;
  position: absolute;
  left:-0.25rem;
  /* bottom:424rem; */
  top:4.58rem;
  z-index: 1;
  width: 3.12rem;
  height: 3.20rem;
  opacity: 0;
}
.eggMiddle{
  left: 1.93rem;
}
.eggRight{
  left: 4.13rem;
}
.egg-broken{
  position: relative;
  width: 3.12rem;
  height: 3.20rem;
}
.egg-shadow{
  position: absolute;
  left:0.93rem;
  bottom:-0.22rem;
  width: 1.71rem;
  height: 0.65rem;
}
.egg_1{
  position: absolute;
  left: 0.47rem;
  bottom:0;
  width: 2.58rem;
  height: 2.60rem;
}
.egg_2{
  position: absolute;
  left:0.77rem;
  bottom:1.22rem;
  width: 1.35rem;
  height: 1.38rem;
}
.egg_3{
  position: absolute;
  left:1.59rem;
  bottom:1.58rem;
  width: 1.00rem;
  height: 1.03rem;
}
.egg_4{
  position: absolute;
  left:1.90rem;
  bottom:1.16rem;
  width: 0.88rem;
  height: 0.92rem;
}
.egg-broken-wrap.showEggOpenAnimate{
  animation: eggBroken 0.1s 0.9s linear forwards;
}
.egg-broken-wrap.showEggOpenAnimate .shakeAnimate{
  animation: eggShake 0.4s 0.9s linear 8;
}
.showEggOpenAnimate .egg_2{
  animation: eggChild2 1.5s 1.6s linear forwards;
}
.showEggOpenAnimate .egg_3{
  animation: eggChild3 1.5s 1.6s linear forwards;
}
.showEggOpenAnimate .egg_4{
  animation: eggChild4 1.5s 1.6s linear forwards;
}
@keyframes eggShake{
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-0.04rem, -0.04rem, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(0.04rem, 0.04rem, 0);
  }
}
@keyframes eggChild2{
  0%{
    transform:translate3d(0,0,0) rotate(0);
    opacity: 1;
  }
  30%{
    transform:translate3d(-1.345rem,-2.72rem,0) rotate(-248.7deg);
    opacity: 0.8;
  }
  100%{
    transform:translate3d(-3.84rem,0.50rem,0) rotate(-316deg);
    opacity: 0;
  }
}
@keyframes eggChild3{
  0%{
    transform: translate3d(0,0,0) rotate(0);
    opacity: 1;
  }
  30%{
    transform: translate3d(2.40rem,-4.48rem,0) rotate(167deg);
    opacity: 0.8;
  }
  100%{
    transform: translate3d(7.16rem,2.96rem,0) rotate(205deg);
    opacity: 0;
  }
}
@keyframes eggChild4{
  0%{
    transform: translate3d(0,0,0) rotate(0);
    opacity: 1;
  }
  30%{
    transform: translate3d(2.88rem,-1.52rem,0) rotate(224deg);
    opacity: 0.8;
  }
  100%{
    transform: translate3d(5.56rem,2.48rem,0) rotate(273deg);
    opacity: 0;
  }
}
@keyframes eggBroken{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/**hammer**/
.hammer{
  position: absolute;
  z-index: 1;
  left: 4.26rem;
  /* bottom: 650rem; */
  top:3.50rem;
  width: 1.89rem; 
  height: 2.14rem;
  animation: hammer 1s linear infinite;
  transition: all 0.2s linear;
}
/*click left egg*/
 .hammer-left{
   left: 2.2rem;
   z-index: 1;
   animation: hammerClickLeft 2s linear forwards;
   opacity: 1;
 }
  .hammer-middle{
   z-index: 1;
  left: 4.40rem;
   animation: hammerClickLeft 2s linear forwards;
   opacity: 1;
 }
 .hammer-right{
   z-index: 1;
  left: 6.60rem;
   animation: hammerClickLeft 2s linear forwards;
   opacity: 1;
 }

 @keyframes hammer{
     0%,100%{
         transform: rotate(0);
     }
     50%{
         transform: rotate(3deg);
     }
 }

 @keyframes hammerClickLeft{
   0%{
     transform: translateX(0) rotate(0);
     transform-origin: 100% 100%;
   }
   20%{
     transform: translateX(0) rotate(0);
     transform-origin: 100% 100%;
   }
   40%{
     transform: translateX(0) rotate(45deg);
     transform-origin: 100% 100%;
   }
   45%{
     transform: translateX(-1.2rem) translateY(0.80rem) rotate(-48deg);
     transform-origin: 50% 50%;
     opacity: 1;
   }
   70%,100%{
     transform: translateX(0.4rem) translateY(0) rotate(48deg);
     transform-origin: 50% 50%;
     opacity: 0;
   }
 }

 
 /**star && light**/
 .light{
    pointer-events: none;
    position: absolute;
    z-index: 1;
    /* bottom: 380rem; */
    top:2.60rem;
    width: 3.25rem;
    height: 5.78rem;
    overflow: hidden;
    opacity: 0;
 }
 .light.showEggOpenAnimate{
   opacity: 1;
 }
 .showEggOpenAnimate  .light-sprites{
    animation: light 2s 0.8s step-end forwards;
}
 .light-sprites{
   width: 279.50rem;
   height: 5.78rem;
 }
  
.light-eggLeft{
  left: -0.20rem;
}
 .light-eggMiddle{
   left: 1.90rem;
 }
.light-eggRight{
   left: 4.20rem;
 }
 @keyframes light {
    0% {
        transform:translateX(0);
    }

    1.16% {
        transform:translateX(-3.25rem);
    }

    2.33% {
        transform:translateX(-6.50rem);
    }

    3.49% {
        transform:translateX(-9.75rem);
    }

    4.65% {
        transform:translateX(-13.00rem);
    }

    5.81% {
        transform:translateX(-16.25rem);
    }

    6.98% {
        transform:translateX(-19.50rem);
    }

    8.14% {
        transform:translateX(-22.75rem);
    }

    9.30% {
        transform:translateX(-26.00rem);
    }

    10.47% {
        transform:translateX(-29.25rem);
    }

    11.63% {
        transform:translateX(-32.50rem);
    }

    12.79% {
        transform:translateX(-35.75rem);
    }

    13.95% {
        transform:translateX(-39.00rem);
    }

    15.12% {
        transform:translateX(-42.25rem);
    }

    16.28% {
        transform:translateX(-45.50rem);
    }

    17.44% {
        transform:translateX(-48.75rem);
    }

    18.60% {
        transform:translateX(-52.00rem);
    }

    19.77% {
        transform:translateX(-55.25rem);
    }

    20.93% {
        transform:translateX(-58.50rem);
    }

    22.09% {
        transform:translateX(-61.75rem);
    }

    23.26% {
        transform:translateX(-65.00rem);
    }

    24.42% {
        transform:translateX(-68.25rem);
    }

    25.58% {
        transform:translateX(-71.50rem);
    }

    26.74% {
        transform:translateX(-74.75rem);
    }

    27.91% {
        transform:translateX(-78.00rem);
    }

    29.07% {
        transform:translateX(-81.25rem);
    }

    30.23% {
        transform:translateX(-84.50rem);
    }

    31.40% {
        transform:translateX(-87.75rem);
    }

    32.56% {
        transform:translateX(-91.00rem);
    }

    33.72% {
        transform:translateX(-94.25rem);
    }

    34.88% {
        transform:translateX(-97.50rem);
    }

    36.05% {
        transform:translateX(-100.75rem);
    }

    37.21% {
        transform:translateX(-104.00rem);
    }

    38.37% {
        transform:translateX(-107.25rem);
    }

    39.53% {
        transform:translateX(-110.50rem);
    }

    40.70% {
        transform:translateX(-113.75rem);
    }

    41.86% {
        transform:translateX(-117.00rem);
    }

    43.02% {
        transform:translateX(-120.25rem);
    }

    44.19% {
        transform:translateX(-123.50rem);
    }

    45.35% {
        transform:translateX(-126.75rem);
    }

    46.51% {
        transform:translateX(-130.00rem);
    }

    47.67% {
        transform:translateX(-133.25rem);
    }

    48.84% {
        transform:translateX(-136.50rem);
    }

    50.00% {
        transform:translateX(-139.75rem);
    }

    51.16% {
        transform:translateX(-143.00rem);
    }

    52.33% {
        transform:translateX(-146.25rem);
    }

    53.49% {
        transform:translateX(-149.50rem);
    }

    54.65% {
        transform:translateX(-152.75rem);
    }

    55.81% {
        transform:translateX(-156.00rem);
    }

    56.98% {
        transform:translateX(-159.25rem);
    }

    58.14% {
        transform:translateX(-162.50rem);
    }

    59.30% {
        transform:translateX(-165.75rem);
    }

    60.47% {
        transform:translateX(-169.00rem);
    }

    61.63% {
        transform:translateX(-172.25rem);
    }

    62.79% {
        transform:translateX(-175.50rem);
    }

    63.95% {
        transform:translateX(-178.75rem);
    }

    65.12% {
        transform:translateX(-182.00rem);
    }

    66.28% {
        transform:translateX(-185.25rem);
    }

    67.44% {
        transform:translateX(-188.50rem);
    }

    68.60% {
        transform:translateX(-191.75rem);
    }

    69.77% {
        transform:translateX(-195.00rem);
    }

    70.93% {
        transform:translateX(-198.25rem);
    }

    72.09% {
        transform:translateX(-201.50rem);
    }

    73.26% {
        transform:translateX(-204.75rem);
    }

    74.42% {
        transform:translateX(-208.00rem);
    }

    75.58% {
        transform:translateX(-211.25rem);
    }

    76.74% {
        transform:translateX(-214.50rem);
    }

    77.91% {
        transform:translateX(-217.75rem);
    }

    79.07% {
        transform:translateX(-221.00rem);
    }

    80.23% {
        transform:translateX(-224.25rem);
    }

    81.40% {
        transform:translateX(-227.50rem);
    }

    82.56% {
        transform:translateX(-230.75rem);
    }

    83.72% {
        transform:translateX(-234.00rem);
    }

    84.88% {
        transform:translateX(-237.25rem);
    }

    86.05% {
        transform:translateX(-240.50rem);
    }

    87.21% {
        transform:translateX(-243.75rem);
    }

    88.37% {
        transform:translateX(-247.00rem);
    }

    89.53% {
        transform:translateX(-250.25rem);
    }

    90.70% {
        transform:translateX(-253.50rem);
    }

    91.86% {
        transform:translateX(-256.75rem);
    }

    93.02% {
        transform:translateX(-260.00rem);
    }

    94.19% {
        transform:translateX(-263.25rem);
    }

    95.35% {
        transform:translateX(-266.50rem);
    }

    96.51% {
        transform:translateX(-269.75rem);
    }

    97.67% {
        transform:translateX(-273.00rem);
    }

    98.84%,
    100% {
        transform:translateX(-276.25rem);
    }
}

/**column**/
.column-wrap{
  position: absolute;
  left: 0.49rem;
  bottom:1.5rem;
  width: 2.46rem;
  height: 8.90rem;
  overflow: hidden;
  opacity: 1;
}
.column-animte{
  width: 2.46rem;
  height: 26.70rem;
}
.column-info{
  transform: translateY(11.00rem);
}
.showEggOpenAnimate .column-info{
  animation: showColumn 1s 2.3s linear forwards;
}
.showEggOpenAnimate .column-animte{
  animation: columnAnimate 1s 2s linear 6;
}
.showEggOpenAnimate .column-wrap{
  animation: hideColumn 0.2s 3.6s linear forwards;
}
.column-image{
  margin-top: -1.35rem;
  width: 2.46rem;
  height: 9.09rem;
}
@keyframes showColumn{
  0%{
    transform: translateY(11.00rem);
  }
  100%{
    transform: translateY(0)
  }
}
@keyframes columnAnimate{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-26.70rem);
  }
}
@keyframes hideColumn{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}